<template>
  <div class="task-create-container">
    <!-- 顶部标题栏 -->
    <div class="task-header">
      <div class="header-left">
        <h1><i class="el-icon-cpu"></i> 特种车辆设备故障智能分析系统</h1>
        <p>新建任务配置平台</p>
      </div>
      <div class="header-right">
        <el-button type="primary" icon="el-icon-check" @click="submitTask">提交任务</el-button>
        <el-button icon="el-icon-close" @click="cancelCreate">取消</el-button>
        <el-avatar :size="40" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
        <span>管理员</span>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="task-content">
      <!-- 左侧任务属性 -->
      <div class="task-properties-card">
        <div class="card-header">
          <h2><i class="el-icon-document"></i> 任务属性</h2>
        </div>
        <el-form :model="taskForm" label-width="100px" label-position="top" class="task-form">
          <el-form-item label="任务名称" required>
            <el-input v-model="taskForm.name" placeholder="请输入任务名称"></el-input>
          </el-form-item>

          <el-form-item label="任务类型" required>
            <el-select v-model="taskForm.type" placeholder="请选择任务类型">
              <el-option label="弹药补给任务" value="ammo"></el-option>
              <el-option label="导弹部署任务" value="missile"></el-option>
              <el-option label="综合保障任务" value="comprehensive"></el-option>
              <el-option label="紧急维修任务" value="maintenance"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间要求">
            <div class="time-requirements">
              <el-date-picker
                  v-model="taskForm.startTime"
                  type="datetime"
                  placeholder="选择开始时间">
              </el-date-picker>
              <span class="time-separator">至</span>
              <el-date-picker
                  v-model="taskForm.endTime"
                  type="datetime"
                  placeholder="选择结束时间">
              </el-date-picker>
            </div>
          </el-form-item>

          <el-form-item label="任务优先级">
            <el-rate
                v-model="taskForm.priority"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                :max="3"
                show-text
                :texts="['普通', '重要', '紧急']">
            </el-rate>
          </el-form-item>

          <el-form-item label="任务描述">
            <el-input
                type="textarea"
                :rows="4"
                v-model="taskForm.description"
                placeholder="请输入任务详细描述">
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <!-- 右侧任务需求 -->
      <div class="task-requirements-card">
        <div class="card-header">
          <h2><i class="el-icon-setting"></i> 任务需求配置</h2>
        </div>
        <el-tabs v-model="activeRequirementTab" class="requirement-tabs">
          <!-- 行驶需求 -->
          <el-tab-pane label="行驶需求" name="driving">
            <div class="driving-config">
              <div class="config-section">
                <h3>预期行驶里程</h3>
                <div class="range-input">
                  <el-input-number
                      v-model="drivingRequirements.distance"
                      :min="10"
                      :max="1000"
                      controls-position="right"
                      step-strictly>
                  </el-input-number>
                  <span class="unit">公里</span>
                </div>
              </div>

              <div class="config-section">
                <h3>地形分布</h3>
                <div class="terrain-distribution">
                  <div class="terrain-item" v-for="(terrain, index) in drivingRequirements.terrains" :key="index">
                    <div class="terrain-label">{{ terrain.name }}</div>
                    <el-slider
                        v-model="terrain.percentage"
                        :min="0"
                        :max="100"
                        show-input>
                    </el-slider>
                  </div>
                </div>
                <div class="terrain-chart">
                  <v-chart class="chart" :option="terrainChartOption" autoresize />
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 武器需求 -->
          <el-tab-pane label="武器需求" name="weapon">
            <div class="weapon-config">
              <div class="config-section">
                <h3>武器类型选择</h3>
                <div class="weapon-select">
                  <el-radio-group v-model="weaponRequirements.weaponType">
                    <el-radio-button label="ammo">弹药补给</el-radio-button>
                    <el-radio-button label="missile">导弹部署</el-radio-button>
                    <el-radio-button label="mixed">混合任务</el-radio-button>
                  </el-radio-group>
                </div>
              </div>

              <!-- 弹药配置 -->
              <div class="config-section" v-if="weaponRequirements.weaponType !== 'missile'">
                <h3>弹药配置</h3>
                <div class="ammo-config">
                  <div class="ammo-item" v-for="(ammo, index) in weaponRequirements.ammoTypes" :key="index">
                    <div class="ammo-select">
                      <el-select v-model="ammo.type" placeholder="选择弹药类型">
                        <el-option
                            v-for="item in ammoOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="ammo-quantity">
                      <el-input-number
                          v-model="ammo.quantity"
                          :min="10"
                          :max="1000"
                          controls-position="right"
                          step-strictly>
                      </el-input-number>
                      <span class="unit">发</span>
                    </div>
                    <div class="ammo-actions">
                      <el-button
                          v-if="index === weaponRequirements.ammoTypes.length - 1"
                          icon="el-icon-plus"
                          circle
                          @click="addAmmoType">
                      </el-button>
                      <el-button
                          v-if="weaponRequirements.ammoTypes.length > 1"
                          icon="el-icon-minus"
                          circle
                          @click="removeAmmoType(index)">
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 导弹配置 -->
              <div class="config-section" v-if="weaponRequirements.weaponType !== 'ammo'">
                <h3>导弹配置</h3>
                <div class="missile-config">
                  <div class="missile-item" v-for="(missile, index) in weaponRequirements.missileTypes" :key="index">
                    <div class="missile-select">
                      <el-select v-model="missile.type" placeholder="选择导弹类型">
                        <el-option
                            v-for="item in missileOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="missile-quantity">
                      <el-input-number
                          v-model="missile.quantity"
                          :min="1"
                          :max="50"
                          controls-position="right"
                          step-strictly>
                      </el-input-number>
                      <span class="unit">枚</span>
                    </div>
                    <div class="missile-actions">
                      <el-button
                          v-if="index === weaponRequirements.missileTypes.length - 1"
                          icon="el-icon-plus"
                          circle
                          @click="addMissileType">
                      </el-button>
                      <el-button
                          v-if="weaponRequirements.missileTypes.length > 1"
                          icon="el-icon-minus"
                          circle
                          @click="removeMissileType(index)">
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="config-section">
                <h3>弹药消耗预测</h3>
                <div class="consumption-chart">
                  <v-chart class="chart" :option="consumptionChartOption" autoresize />
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 环境要求 -->
          <el-tab-pane label="环境要求" name="environment">
            <div class="environment-config">
              <div class="config-section">
                <h3>温度范围</h3>
                <div class="range-input">
                  <el-input-number
                      v-model="environmentRequirements.minTemp"
                      :min="-40"
                      :max="60"
                      controls-position="right"
                      step-strictly>
                  </el-input-number>
                  <span class="unit">℃</span>
                  <span class="range-separator">至</span>
                  <el-input-number
                      v-model="environmentRequirements.maxTemp"
                      :min="-40"
                      :max="60"
                      controls-position="right"
                      step-strictly>
                  </el-input-number>
                  <span class="unit">℃</span>
                </div>
              </div>

              <div class="config-section">
                <h3>海拔高度</h3>
                <div class="range-input">
                  <el-input-number
                      v-model="environmentRequirements.minAltitude"
                      :min="0"
                      :max="6000"
                      controls-position="right"
                      step-strictly>
                  </el-input-number>
                  <span class="unit">米</span>
                  <span class="range-separator">至</span>
                  <el-input-number
                      v-model="environmentRequirements.maxAltitude"
                      :min="0"
                      :max="6000"
                      controls-position="right"
                      step-strictly>
                  </el-input-number>
                  <span class="unit">米</span>
                </div>
              </div>

              <div class="config-section">
                <h3>其他环境要求</h3>
                <el-checkbox-group v-model="environmentRequirements.otherRequirements">
                  <el-checkbox label="防水要求"></el-checkbox>
                  <el-checkbox label="防尘要求"></el-checkbox>
                  <el-checkbox label="防震要求"></el-checkbox>
                  <el-checkbox label="防电磁干扰"></el-checkbox>
                </el-checkbox-group>
              </div>

              <div class="config-section">
                <h3>温压曲线</h3>
                <div class="pressure-chart">
                  <v-chart class="chart" :option="pressureChartOption" autoresize />
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { ElMessage } from 'element-plus'

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  components: {
  },
  setup() {
    // 任务属性表单
    const taskForm = reactive({
      name: '',
      type: '',
      startTime: null,
      endTime: null,
      priority: 1,
      description: ''
    })

    // 当前激活的需求选项卡
    const activeRequirementTab = ref('driving')

    // 行驶需求配置
    const drivingRequirements = reactive({
      distance: 100,
      terrains: [
        { name: '平原', percentage: 40 },
        { name: '山地', percentage: 30 },
        { name: '沙漠', percentage: 20 },
        { name: '沼泽', percentage: 10 }
      ]
    })

    // 武器需求配置
    const weaponRequirements = reactive({
      weaponType: 'ammo',
      ammoTypes: [
        { type: 'armor-piercing', quantity: 100 },
        { type: 'high-explosive', quantity: 80 }
      ],
      missileTypes: [
        { type: 'surface-to-air', quantity: 5 },
        { type: 'anti-tank', quantity: 3 }
      ]
    })

    // 环境要求配置
    const environmentRequirements = reactive({
      minTemp: -10,
      maxTemp: 40,
      minAltitude: 0,
      maxAltitude: 3000,
      otherRequirements: []
    })

    // 弹药选项
    const ammoOptions = [
      { label: '穿甲弹', value: 'armor-piercing' },
      { label: '高爆弹', value: 'high-explosive' },
      { label: '烟雾弹', value: 'smoke' },
      { label: '照明弹', value: 'illumination' },
      { label: '训练弹', value: 'training' }
    ]

    // 导弹选项
    const missileOptions = [
      { label: '地对空导弹', value: 'surface-to-air' },
      { label: '反坦克导弹', value: 'anti-tank' },
      { label: '巡航导弹', value: 'cruise' },
      { label: '弹道导弹', value: 'ballistic' },
      { label: '反舰导弹', value: 'anti-ship' }
    ]

    // 添加弹药类型
    const addAmmoType = () => {
      weaponRequirements.ammoTypes.push({ type: '', quantity: 50 })
    }

    // 移除弹药类型
    const removeAmmoType = (index) => {
      if (weaponRequirements.ammoTypes.length > 1) {
        weaponRequirements.ammoTypes.splice(index, 1)
      }
    }

    // 添加导弹类型
    const addMissileType = () => {
      weaponRequirements.missileTypes.push({ type: '', quantity: 5 })
    }

    // 移除导弹类型
    const removeMissileType = (index) => {
      if (weaponRequirements.missileTypes.length > 1) {
        weaponRequirements.missileTypes.splice(index, 1)
      }
    }

    // 地形分布图表配置
    const terrainChartOption = computed(() => {
      return {
        title: {
          text: '地形分布',
          textStyle: {
            color: '#e4e8f0'
          }
        },
        tooltip: {
          trigger: 'item',
          textStyle: {
            color: '#000'
          },
          backgroundColor: 'rgba(255,255,255,0.9)'
        },
        legend: {
          textStyle: {
            color: '#e4e8f0'
          }
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: drivingRequirements.terrains.map(terrain => ({
              value: terrain.percentage,
              name: terrain.name
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              color: function(params) {
                const colors = ['#ff9f7f', '#fb7293', '#e7bcf3', '#91cc75']
                return colors[params.dataIndex]
              }
            }
          }
        ]
      }
    })

    // 弹药消耗预测图表配置
    const consumptionChartOption = computed(() => {
      const ammoData = weaponRequirements.ammoTypes.map(ammo => {
        const ammoLabel = ammoOptions.find(opt => opt.value === ammo.type)?.label || '未知弹药'
        return { name: ammoLabel, value: ammo.quantity }
      })

      const missileData = weaponRequirements.missileTypes.map(missile => {
        const missileLabel = missileOptions.find(opt => opt.value === missile.type)?.label || '未知导弹'
        return { name: missileLabel, value: missile.quantity }
      })

      return {
        title: {
          text: '武器消耗预测',
          textStyle: {
            color: '#e4e8f0'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#000'
          },
          backgroundColor: 'rgba(255,255,255,0.9)'
        },
        legend: {
          data: ['弹药', '导弹'],
          textStyle: {
            color: '#e4e8f0'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [...ammoData.map(d => d.name), ...missileData.map(d => d.name)],
          axisLine: {
            lineStyle: {
              color: '#2a3a6a'
            }
          },
          axisLabel: {
            color: '#a0b1d0'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#2a3a6a'
            }
          },
          axisLabel: {
            color: '#a0b1d0'
          },
          splitLine: {
            lineStyle: {
              color: '#2a3a6a'
            }
          }
        },
        series: [
          {
            name: '弹药',
            type: 'bar',
            stack: '武器',
            data: ammoData.map(d => d.value),
            itemStyle: {
              color: '#5470c6'
            }
          },
          {
            name: '导弹',
            type: 'bar',
            stack: '武器',
            data: missileData.map(d => d.value),
            itemStyle: {
              color: '#91cc75'
            }
          }
        ]
      }
    })

    // 温压曲线图表配置
    const pressureChartOption = computed(() => {
      return {
        title: {
          text: '温压曲线',
          textStyle: {
            color: '#e4e8f0'
          }
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#000'
          },
          backgroundColor: 'rgba(255,255,255,0.9)'
        },
        legend: {
          data: ['温度', '气压'],
          textStyle: {
            color: '#e4e8f0'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
          axisLine: {
            lineStyle: {
              color: '#2a3a6a'
            }
          },
          axisLabel: {
            color: '#a0b1d0'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '温度(℃)',
            axisLine: {
              lineStyle: {
                color: '#2a3a6a'
              }
            },
            axisLabel: {
              color: '#a0b1d0'
            },
            splitLine: {
              lineStyle: {
                color: '#2a3a6a'
              }
            }
          },
          {
            type: 'value',
            name: '气压(hPa)',
            axisLine: {
              lineStyle: {
                color: '#2a3a6a'
              }
            },
            axisLabel: {
              color: '#a0b1d0'
            },
            splitLine: {
              lineStyle: {
                color: '#2a3a6a'
              }
            }
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            data: [environmentRequirements.minTemp, 15, 25, environmentRequirements.maxTemp, 30, 20, environmentRequirements.minTemp],
            itemStyle: { color: '#ee6666' },
            smooth: true
          },
          {
            name: '气压',
            type: 'line',
            yAxisIndex: 1,
            data: [1010, 1005, 1000, 995, 990, 995, 1000],
            itemStyle: { color: '#5470c6' },
            smooth: true
          }
        ]
      }
    })

    // 提交任务
    const submitTask = () => {
      if (!taskForm.name || !taskForm.type) {
        ElMessage.warning('请填写任务名称和类型')
        return
      }
      ElMessage.success('任务创建成功')
      // 实际项目中这里会调用API提交任务
    }

    // 取消创建
    const cancelCreate = () => {
      ElMessage.info('已取消任务创建')
      // 实际项目中这里会返回上一页或清空表单
    }

    return {
      taskForm,
      activeRequirementTab,
      drivingRequirements,
      weaponRequirements,
      environmentRequirements,
      ammoOptions,
      missileOptions,
      addAmmoType,
      removeAmmoType,
      addMissileType,
      removeMissileType,
      terrainChartOption,
      consumptionChartOption,
      pressureChartOption,
      submitTask,
      cancelCreate
    }
  }
}
</script>

<style scoped>
.task-create-container {
  background-color: #0f1c3c;
  color: #e4e8f0;
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: linear-gradient(90deg, #1a2a52, #0a1a3a);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid #2a3a6a;
}

.header-left h1 {
  font-size: 24px;
  font-weight: 600;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}

.header-left p {
  font-size: 14px;
  color: #a0b1d0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.task-content {
  display: flex;
  gap: 20px;
  height: calc(100% - 90px);
}

.task-properties-card {
  width: 35%;
  background: linear-gradient(145deg, #1a2a52, #0a1a3a);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid #2a3a6a;
  display: flex;
  flex-direction: column;
}

.task-requirements-card {
  flex: 1;
  background: linear-gradient(145deg, #1a2a52, #0a1a3a);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid #2a3a6a;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #2a3a6a;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  color: #e4e8f0;
}

.task-form {
  flex: 1;
  overflow-y: auto;
}

.requirement-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.requirement-tabs :deep(.el-tabs__content) {
  flex: 1;
  overflow-y: auto;
}

.config-section {
  margin-bottom: 25px;
  padding: 15px;
  background: rgba(26, 42, 82, 0.3);
  border-radius: 8px;
}

.config-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #e4e8f0;
  font-size: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a3a6a;
}

.range-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.unit {
  color: #a0b1d0;
  font-size: 14px;
}

.range-separator {
  color: #a0b1d0;
  margin: 0 5px;
}

.time-requirements {
  display: flex;
  align-items: center;
  gap: 10px;
}

.time-separator {
  color: #a0b1d0;
  margin: 0 5px;
}

.terrain-item, .ammo-item, .missile-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 15px;
}

.terrain-label {
  width: 60px;
  color: #a0b1d0;
}

.ammo-select, .missile-select {
  flex: 2;
}

.ammo-quantity, .missile-quantity {
  flex: 1;
  display: flex;
  align-items: center;
}

.ammo-actions, .missile-actions {
  flex: 0 0 80px;
  display: flex;
  gap: 5px;
}

.terrain-chart, .consumption-chart, .pressure-chart {
  height: 300px;
  margin-top: 20px;
}

.chart {
  width: 100%;
  height: 100%;
}

@media (max-width: 1200px) {
  .task-content {
    flex-direction: column;
  }
  
  .task-properties-card {
    width: 100%;
  }
}
</style>